<template>
  <el-drawer
    v-if="visible"
    :visible.sync="visible"
    :with-header="true"
    title="精准时段配置日志"
    :append-to-body="true"
    size="80%"
  >
    <el-table-form ref="form">
      <el-form-item label="配置人:">
        <el-input v-model.trim="form.operateUserName" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item :table-form-merge="2" label="配置时间:">
        <el-date-picker
          v-model="createTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          unlink-panels
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
        />
      </el-form-item>
      <template v-slot:btns>
        <el-button
          v-permission="1"
          type="primary"
          @click="search"
        >查询</el-button>
      </template>
    </el-table-form>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.getLogInfo"
      border
      :height="358"
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      @fetch="getLogInfo"
    />
  </el-drawer>
</template>

<script>
  import dayjs from 'dayjs'
  import { parseTime } from '@/utils'
  import { appointTimeSettingRecord } from '@/api'
  export default {
    name: 'preciseTimeLog',
    data() {
      return {
        visible: false,
        form: {
          operateUserName: ''
        },
        createTime: [dayjs().startOf('day'), dayjs().endOf('day')],
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              label: '序号',
              type: 'index',
              width: 50
            },
            {
              prop: 'operateUserName',
              label: '配置人'
            },
            {
              prop: 'operateTime',
              label: '配置时间',
              render: (h, { row }) => row.operateTime && <span>{ parseTime(row.operateTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'detailInfoList',
              label: '精准时间段',
              render: (h, { row }) =>
                <div>{
                  row.detailInfoList.map(item => {
                     return <p>{item.start + ' ~ ' + item.end}</p>
                  })
                }</div>
            },
            {
              prop: 'operateType',
              label: '操作类型',
              render: (h, { row }) => row.operateType && <span>{ row.operateType === 1 ? '新增' : row.operateType === 2 ? '修改' : '' }</span>
            }
          ]
        }
      }
    },
    methods: {
      open() {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getLogInfo({ currentPage, pageSize }) {
        const query = {
          params: {
            startTime: this.createTime && this.createTime.length > 0 ? dayjs(this.createTime[0]).format('YYYY-MM-DD HH:mm:ss') : '',
            endTime: this.createTime && this.createTime.length > 0 ? dayjs(this.createTime[1]).format('YYYY-MM-DD HH:mm:ss') : '',
            operateUserName: this.form.operateUserName
          },
          currentPage,
          pageSize
        }
        const res = await appointTimeSettingRecord(query)
        if (res && res.data) {
          this.tableData.data = res.data.rows.map((item) => ({
            ...item,
            detailInfoList: item.detailInfoList && item.detailInfoList.length > 0 ? item.detailInfoList.map((ele) => ({
              ...ele,
              start: dayjs(ele.startTime).format('HH:mm'),
              end: dayjs(ele.endTime).format('HH:mm')
            })) : []
          }))
          this.tableData.total = res.data.total
        }
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
